<template>
  <view class="container">
    <!-- 顶部个人信息 -->
    <view class="header">
      <view class="avatar-box">
        <image class="avatar" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/我的图标.png" mode="aspectFill"></image>
      </view>
      <text class="username">我的</text>
    </view>

    <!-- 水电气用量分析报告 -->
    <view class="watergas-card">
      <view class="watergas-header">
        <text class="watergas-title">水电气用量分析报告</text>
        <image class="watergas-sound-icon" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/喇叭.png" mode="aspectFit"></image>
      </view>
      <view class="watergas-content">
        <view class="watergas-icon-container">
          <image class="watergas-icon" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/water.png" mode="aspectFit"></image>
        </view>
        <text class="watergas-tip">今日用水量为124L，对比上周减少15%，用电量为6kWh，对比上周增加5%，燃气无异常泄漏。</text>
      </view>
    </view>
	
	<view class="monitor-title">水电气监测</view>
	
	<!-- 水卡片 -->
	<view class="water-card">
	  <view class="water-container">
	    <view class="water-left">
	      <view class="water-header">
	        <text class="water-name">水</text>
	        <view class="water-icon">
	          <image src="https://www.ruanzi.net/jy/wxuser/103/images/pages/水image.png" mode="aspectFit"></image>
	        </view>
	      </view>
	      <text class="water-status normal">531L</text>
		</view>
	  </view>
	</view>
	
	<!-- 电卡片 -->
	<view class="elec-card">
	  <view class="water-container">
	    <view class="water-left">
	      <view class="water-header">
	        <text class="water-name">电</text>
	        <view class="water-icon">
	          <image src="https://www.ruanzi.net/jy/wxuser/103/images/pages/电image.png" mode="aspectFit"></image>
	        </view>
	      </view>
	      <text class="water-status normal">6kWh</text>
	    </view>
		
		<view class="glucose-chart">
		  <image class="chart-img" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/电统计图.png" mode="aspectFit"></image>
		</view>
	  </view>
	</view>
	
	<!-- 气卡片 -->
	<view class="gas-card">
	  <view class="water-container">
	    <view class="water-left">
	      <view class="water-header">
	        <text class="water-name">气</text>
	        <view class="water-icon">
	          <image src="https://www.ruanzi.net/jy/wxuser/103/images/pages/气image.png" mode="aspectFit"></image>
	        </view>
	      </view>
	      <text class="gas-status normal">无异常</text>
		</view>
	  </view>
	</view>
	
    <view class="back-to-top" @click="scrollToTop">
      <image class="back-to-top-icon" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/上-箭头.png" mode="aspectFit"></image>
      <text class="back-to-top-text">回到顶部</text>
    </view>
  </view>
</template>

<script setup>
// 页面逻辑可以在这里添加
const scrollToTop = () => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  });
};
</script>

<style>
.container {
  padding: 20px;
  background: linear-gradient(to bottom, 
    #fffff0 0%, 
    #fff7dc 25%, 
    #ffd08e 50%, 
    #ffe9c1 75%, 
    #fffaf4 100%);
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.avatar {
  width: 100%;
  height: 100%;
}

.username {
  font-size: 20px;
  font-weight: bold;
  margin-left: 15px;
}

.monitor-title{
  font-size: 18px;
  margin: 8px;
}

.glucose-chart {
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
}

.chart-img {
  width: 100%;
  height: 100%;
}

/* 水电气用量分析报告*/
.watergas-card {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 2px 2px 2px 2px rgba(255, 170, 0, 0.2);
  margin-bottom: 15px;
  position: relative;
}

.watergas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.watergas-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.watergas-sound-icon {
  width: 24px;
  height: 24px;
}

.watergas-content {
  display: flex;
  align-items: center;
}

.watergas-icon-container {
  width: 100px;
  height: 100px;
  margin-right: 15px;
  flex-shrink: 0;
}

.watergas-icon {
  width: 100%;
  height: 100%;
}

.watergas-tip {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  flex: 1;
}

/*水*/
.water-card {
  background-color: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 2px 2px 2px 2px rgba(255, 170, 0, 0.2);
  margin-bottom: 15px;
}

.water-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 120px;
}

.water-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40%;
  justify-content: flex-start;
}

.water-header {
  width: 100%;
  height: 60px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}

.water-name {
  font-size: 40px;
  font-weight: bold;
  color: #000;
  margin-right: 10px;
}

.water-icon {
  width: 50px;
  height:50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.water-icon image {
  width: 50px;
  height:50px;
}

.water-status {
  font-size: 25px;
  font-weight: bold;
  color: #000;
  margin-top: 20px;
}

/*电*/
.elec-card {
  background-color: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 2px 2px 2px 2px rgba(255, 170, 0, 0.2);
  margin-bottom: 15px;
}

/*气*/
.gas-card {
  background-color: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 2px 2px 2px 2px rgba(255, 170, 0, 0.2);
  margin-bottom: 15px;
}

.gas-status {
  font-size: 25px;
  font-weight: bold;
  color: #4caf50;
  margin-top: 20px;
}

.normal {
  color: #4caf50;
}

/* 回到顶部按钮 */
.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffa64d;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 20px auto;
  width: 160px;
  box-shadow: 0 2px 6px rgba(255, 166, 77, 0.3);
}

.back-to-top-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.back-to-top-text {
  color: #747474;
  font-size: 20px;
  font-weight: bold;
}
</style> 